<template>
  <div class="container">
    <el-button size="small" type="primary" icon="el-icon-arrow-left" class="back" @click="prev">
      返回
    </el-button>
    <el-tabs v-model="activeName" type="card" class="tabs" @tab-click="handleClick">
      <el-tab-pane v-for="tab in moduleList" :key="tab.id" :label="tab.title" :name="tab.id + ''">
        <div class="content">
          <el-table :data="tableData" border class="subtable" style="width: calc(100% - 30px)">
            <el-table-column label="ID" prop="id" />
            <el-table-column v-for="(item, index) in tableLabel" :key="index" :prop="item.table_field"
              :label="item.form_title" :show-overflow-tooltips="true">
              <template slot-scope="scope">
                <span v-if="item.form_type == 'reference'">
                  <span v-for="(file, filesIdx) in scope.row[item.table_field]" :key="filesIdx">
                    <span v-if="filesIdx < 3">{{ file.name }} ,</span>
                  </span>
                </span>
                <span v-else-if="item.form_type == 'image'">
                  <img :src="scope.row[item.table_field].url" alt="" class="img" />
                </span>
                <span v-else-if="item.form_type == 'multiImage'">
                  <img v-for="(el, idx) in scope.row[item.table_field]" v-show="idx < 3" :key="idx" :src="el.url" alt=""
                    class="images" />
                </span>
                <el-tooltip v-else placement="top">
                  <div slot="content">{{ scope.row[item.table_field] }}</div>
                  <el-button type="text" class="text">
                    {{ scope.row[item.table_field] }}
                  </el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-pagination :current-page="page.currentPage" :page-sizes="page.pageSizes" :page-size="page.size"
      layout="total, sizes, prev, pager, next, jumper" :total="page.total"
      :hide-on-single-page="page.total < page.size ? true : false" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>
</template>

<script>
import contentApi from '@/api/module'
import columnApi from '@/api/column'
// import { getHuocmsToken } from '@/utils/auth'
// var token = 'Bearer ' + getHuocmsToken()
export default {
  data() {
    return {
      // myHeaders: {  Authorization: `Bearer ${this.$store.getters.token}` },
      // headers: {},
      imageUrl: '',
      imgUrl: this.$store.getters.updateURL,
      module_id: '',
      website_id: '',
      tableData: [],
      dataKey: '',
      dataValue: '',
      tableLabel: [],
      activeName: '1',
      moduleList: [], // 模型列表
      page: {
        total: 0,
        currentPage: 1,
        size: 10,
        pageSizes: [10, 20, 30, 40]
      } // 分页器
    }
  },
  created() {
    this.module_id = this.$route.query.id
    this.website_id = this.$route.query.website_id
    this.activeName = this.$route.query.id + ''

    this.getList()
    this.getContent()
    this.getModulelist()
  },
  methods: {
    // 返回上一页
    prev() {
      this.$router.push({ name: 'Content' })
    },
    // 获取模型列表
    getModulelist() {
      contentApi.moduleList().then(res => {
        this.moduleList = res.data
      })
    },
    // tab切换
    handleClick(tab, event) {
      this.module_id = tab.name
      this.getList()
      this.getContent()
    },

    // 获取表头
    getList() {
      contentApi.fieldList({ module_id: this.module_id }).then(res => {
        const data1 = res.data

        const arr = []
        const arr2 = []
        data1.forEach(el => {
          arr.push({
            form_title: el.form_title,
            table_field: el.table_field
          })
          arr2.push(el.table_field)
        })
        this.dataKey = arr2
        this.tableLabel = data1 // 表头
      })
    },
    // 获取内容
    getContent(val) {
      const data = {
        module_id: this.module_id,
        website_id: this.website_id,
        page: this.page.currentPage,
        limit: this.page.size
      }
      // this.val.page = this.page.currentPage
      // this.val.limit = this.page.size
      columnApi.mainContent(data).then(res => {
        const data2 = res.data

        this.page.total = res.count
        this.tableData = data2
        const arr = []

        const arr2 = []
        const obj = {}
        // data2.forEach(el => {
        //   for (var i = 0;i < this.dataKey.length;i++) {
        //     var a = this.dataKey[i]
        //     // arr2.push({ [a]: el[a] })
        //     obj[a] = el[a]
        //   }

        //   arr2.push(obj)

        //   this.tableData = arr2
        // })
      })
    },
    // 分页规格改变
    handleSizeChange(val) {
      this.page.size = val
      this.page.currentPage = 1
      this.getContent()
    },
    // 分页点击
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getContent()
    }
  }
}
</script>

<style>
.tabs.el-tabs--card>.el-tabs__header .el-tabs__item {
  background-color: #eee;
  border: none;
  margin-right: 5px;
}

.tabs.el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
  background-color: #fff;
}

.tabs.el-tabs--card>.el-tabs__header .el-tabs__nav {
  border-radius: 0;
  border: none;
}

.tabs.el-tabs--card .el-tabs__header {
  margin: 0;
}

.tabs.el-tabs--card>.el-tabs__header {
  border-bottom: 0;
}
</style>
<style scoped lang="scss">
.content {
  padding-top: 40px;
  padding-bottom: 20px;
  background-color: #fff;
}

.subtable {
  margin: 0 15px;
}

.text {
  width: 80%;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #000;
}

// 图片
.img {
  width: 50px;
}

// 图集
.images {
  width: 30px;
  margin-right: 5px;
}

.back {
  margin-bottom: 16px;
}
</style>
